<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>

        <style type="text/css">
            /* class selector */
            /* .wrapper { width: 50% ; height: 100px ; margin: 15px auto ; border: 1px solid blue ; } */

            /* attribute selector */
            [class~=wrapper] { width: 80% ; height: 200px ; margin: 15px auto ; border: 1px solid #ff0304; }

            [class~=first] { background-color: #FFFF00 ; }
        </style>

    </head>
    <body>

        <div class="wrapper first test"></div>
        <div class="wrapper second"></div>
        <div class="wrapper third"></div>
        <div class="wrapper fourth"></div>

    </body>
</html>